<template>
    <el-dialog :title="isEdit ? '编辑规则分组' : '新建规则分组'" :visible.sync="visible" :close-on-click-modal="false" width="30%" class="rule-group-dialog">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="title">
                <el-input
                    v-model="form.title"
                    autocomplete="off"
                    placeholder="规则分组名称"
                    maxlength="30"
                    show-word-limit
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false" size="medium">取消</el-button>
            <el-button type="primary" size="medium" @click="submitForm">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { ruleGroupSave, ruleGroupEdit } from "@/api/rule/rule/rule.js";

    export default {
        data() {
            return {
                visible: false,
                form: {
                    title: "",
                    id: "",
                    scenarioSource: "create"
                },
                isEdit: false,
                rules: {
                    title: [
                        { required: true, message: "请输入规则分组名称", trigger: "blur" }
                    ]
                }
            };
        },
        methods: {
            init(data) {
                this.resetForm();
                if (data && data.id) {
                    this.isEdit = true;
                    this.form.title = data.title;
                    this.form.id = data.id;
                    if (data.scenarioSource) {
                        this.form.scenarioSource = data.scenarioSource;
                    }
                } else {
                    this.isEdit = false;
                }
                this.visible = true;
            },
            resetForm() {
                if (this.$refs.form) {
                    this.$refs.form.resetFields();
                }
                this.form = {
                    title: "",
                    id: "",
                    scenarioSource: "create"
                };
                this.isEdit = false;
            },
            submitForm() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.isEdit) {
                            // 编辑现有分组
                            ruleGroupEdit(this.form).then((resp) => {
                                if (resp.code == 0) {
                                    this.$message({
                                        type: "success",
                                        message: "修改成功!",
                                    });
                                    this.$emit("refreshData");
                                    this.visible = false;
                                } else {
                                    this.$msg({
                                        message: resp.msg,
                                        type: "error",
                                    });
                                }
                            });
                        } else {
                            // 创建新分组
                            ruleGroupSave(this.form).then((resp) => {
                                if (resp.code == 0) {
                                    this.$message({
                                        type: "success",
                                        message: "创建成功!",
                                    });
                                    this.$emit("refreshData");
                                    this.visible = false;
                                } else {
                                    this.$msg({
                                        message: resp.msg,
                                        type: "error",
                                    });
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    };
</script>
<style scoped>
.rule-group-dialog .el-dialog__body {
    padding-bottom: 0;
}
</style>
